// 给出如下数据格式的虚拟dom， 将其转换为真实dom

const vnode = {
  tag:'DIV',
  attrs:{
    id:'app'
  },
  children: [
    {
      tag:'SPAN',
      children:[
        {
          tag:'A',
          text: '去1页面',
          children:[]
        }
      ]
    },
    {
      tag:'SPAN',
      children:[
        {
          tag:'A',
          text: '去2页面',
          children:[]
        },
        {
          tag:'A',
          text: '去3页面',
          children:[]
        }
      ]
    },
  ]
}
// 自己写的实现
// function render(vnode) {
//   const {tag, attrs, text, children} = vnode
//   let parentDom = document.createElement(tag.toLowerCase())
//   if (attrs) {
//     for (const attr in attrs) {
//       if (Object.hasOwnProperty.call(attrs, attr)) {
//         parentDom.setAttribute(attr,attrs[attr])
//       }
//     }
//   }
//   if (text) {
//     parentDom.textContent = text
//   }
//   if (children.length) {
//     for (const child of children) {
//       parentDom.appendChild(render(child))
//     }
//   }
//   return parentDom
// }

function render(vnode) {
  if (typeof vnode === 'number') {
    vnode = String(vnode)
  }
  if (typeof vnode === 'string'){
    return document.createTextNode(vnode)
  }
  const {tag, attrs, children} = vnode
  const element = document.createElement(tag)
  if (attrs) {
    Object.keys(attrs).forEach(key=>{
      element.setAttribute(key,attrs[key])
    })
  }
  if (children.length){
    children.forEach(child=>{
      element.appendChild(render(child))
    })
  }
  return element
}

const domStr = render(vnode)
console.log(domStr)

